<template>
  <div>
  
          <div class="top">
             <img src="/xc1.png" alt="">
          </div>
          <div class="count">
                <dl class="item" v-for="(v1,i1) in item" :key="i1">
                  <dt><img :src="v1.img" alt=""></dt>
                  <dd class="text">{{v1.text}}</dd>
                  <dd class="txt">{{v1.txt}}</dd>
                </dl>
          </div>
          <div class="reli"><img src="/reli.png" alt=""></div>
          <div class="jilu">
            <span>待出行0</span>
            <b>已结束5</b>
          </div>
          <Jilu/>
         
         
          
       

       <Nav/>
  </div>
</template>

<script>
import Jilu from "./component/jilu.vue"
import Nav from "@/components/bottomnav.vue"

export default {
  components:{
    Nav,Jilu

  },
  data() {
    return {
      item:[
        {img:"./count1.png" ,text:"8427公里",txt:"飞行里程"},
        {img:"./count2.png" ,text:"16小时30分钟",txt:"飞行时间"},
        {img:"./count4.png" ,text:"5次",txt:"飞行次数"},
      ]
    }
  },

}
</script>

<style scoped>
.top{
  width: 3.6rem;
  height: 0.6rem;
  /* background-color: yellow; */
}
.top img{
  width: 100%;
  height: 100%;
}
.count{
      width: 360px;
      height: 120px;
      /* background-color: yellow;   */
      margin:  auto;
      display: flex;
      justify-content: space-evenly;
      /* border: 1px solid gainsboro; */

      

}
.item{
  width: 100px;
  height: 100px;
  text-align: center;
  margin-top: 15px;

}
.item img{
  width: 80px;
  height: 40px;
}
.text{
  font-size: 0.16rem;

}
.txt{
  color: gray;
  font-size: 0.12rem;
}
.reli{
  width: 360px;
  height: 60px;
  margin: auto;
}
.reli img{
  width: 100%;
  height: 100%;
}
.jilu {
  width: 360px;
  height: 50px;
  margin: auto;

}
.jilu span{
  color: gray;
  margin-left: 20px;
}
.jilu b{
  font-size: 18px;
  margin-left: 15px;
}
</style>